<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <aaa></aaa>
    </div>
</body>
<script src="../libs/vue3.js"></script>

<script>
    // 创建全局组件，使用Vue的哪个方法
    // Vue.component()

    const { createApp, ref } = Vue;

    // 子组件b
    const b = {
        template: `<div>
                        <p>{{title}}</p>
                        <p>这是从父组件传进来的数据：{{d}}</p>
                    </div>`,
        setup(props, {emit, attrs}){
            const title = ref("这是一个局部组件b");
            const d = ref(props.data);

            console.log(props.class)
            console.log(props.id)
            console.log(props.data)

            console.log(attrs)

            return {title, d};
        },
    }

    // 子组件a
    const a = {
        template: `<div>
                        <p>{{title}}</p>
                        <p>从父组件传过来的值：{{abc}}</p>
                        <bbb :data="data" class="box" id="cont"></bbb>
                    </div>`,
        setup(props, {emit}){
            const title = ref("这是一个局部组件a");
            const data = ref("这是aaa给bbb的值")

            return {title, data};
        },
        components:{
            bbb: b
        }
    }

    // 根组件
    const app = createApp({
        setup() {
            const title = ref("这是根组件");
            return { title };
        },
        components:{
            aaa: a
        }
    });
    

    app.mount("#app");

</script>
</html>